<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tab {
        width: 500px;
    }

    .nav {
        width: 100%;
        height: 50px;
        display: flex;
    }

    .nav ul {
        height: 100%;
        display: flex;
    }

    .nav ul li {
        display: block;
        position: relative;
        width: 50px;
        height: 100%;
        text-align: center;
        line-height: 50px;
        margin: -1px -1px -1px -1px;
        border-style: solid;
        border-color: pink;
        border-width: 2px;
        overflow: hidden;
    }

    .nav ul li .x {
        display: block;
        position: absolute;
        content: "x";
        top: 0;
        right: 0;
        line-height: normal;
    }

    .nav ul .current {
        border-bottom: none !important;
    }

    .tabadd {
        height: 50px;
        flex-grow: 1;
        text-align: end;
        line-height: 50px;
        font-size: 30px;
        margin: -1px 0px -1px -1px;
        border-style: solid;
        border-color: pink;
        border-width: 2px;
    }

    .text {
        width: 100%;
        height: 500px;
    }

    .text div {
        display: none;
    }

    .text .textBlock {
        display: block;
        border-style: solid;
        border-color: pink;
        border-width: 2px;
        border-top: none;
        height: 100%;
        word-wrap: break-word;
    }

    input {
        width: 90%;
    }

    textarea {
        width: 100%;
        height: 100%;
        white-space: pre-line;
    }
</style>

<body>
    <div class="tab">
        <div class="nav">
            <ul>
                <li class="current"><span class="content">1</span><span class="x">x</span></li>
                <li><span class="content">2</span><span class="x">x</span></li>
                <li><span class="content">3</span><span class="x">x</span></li>
                <li><span class="content">4</span><span class="x">x</span></li>
            </ul>
            <div class="tabadd">
                <span>+</span>
            </div>

        </div>
        <div class="text">
            <div class="textBlock">内容1</div>
            <div>内容2</div>
            <div>内容3</div>
            <div>内容4</div>
        </div>
    </div>

</body>

<script src="JavaScript.js"></script>;
<script>
</script>

</html>